<template>
  <div class="item-detail flex column">
    <div class="item-title">轮播图</div>
    <div class="item-content">
      <Form :model="detailData" :label-width="80">
        <FormItem label="主标题">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="detailData.label_name_cn" placeholder="请输入主标题"></Input>
          </div>
        </FormItem>
        <FormItem label="副标题">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="detailData.label_info_summary" placeholder="请输入副标题"></Input>
          </div>
        </FormItem>
        <FormItem label="">
          <div class="flex center">
            <Button type="primary" @click="addBanner">添加新的banner图</Button>
            <p style="margin-left: 10px;font-size: 12px;color: gray;">建议尺寸1280*840,新增图片需保存后进行预览。</p>
          </div>
        </FormItem>
      </Form>
    </div>
    <div class="banner-content-edit scroll" ref="bannerContentEdit">
      <draggable v-model="detailData.json" :options="dragOption">
        <transition-group>
          <div class="banner-content-item flex center" v-for="(item,index) in detailData.json" :key="'banneredit'+index">
            <div class="banner-img-wrapper">
              <div class="input-file-wrapper">
                <img :src="item.image_url" />
                <input :name="index" type="file" accept="image/*" @change='handleFileChange'></input>
              </div>
            </div>
            <div class="banner-form-wrapper">
              <Form :model="item" :label-width="70">
                <FormItem label="主标题">
                  <Input @on-focus="dragOption.disabled = true" @on-blur="dragOption.disabled = false" style="width: 200px;" v-model="item.title" placeholder="请输入主标题"></Input>
                </FormItem>
                <FormItem label="副标题">
                  <Input @on-focus="dragOption.disabled = true" @on-blur="dragOption.disabled = false"  style="width: 200px;" v-model="item.sub_title" placeholder="请输入副标题"></Input>
                </FormItem>
                <FormItem label="跳转链接">
                  <div class="flex center">
                    <Select v-model="item.skip_type" @on-change="chageSel(item)" class="select-wrapper">
                      <Option value="good">商品</Option>
                      <Option value="label">微页面</Option>
                      <Option value="group">团长免单</Option>
                      <Option value="shop">企业</Option>
                      <Option value="h5">H5</Option>
                      <Option value="miniprogram">小程序</Option>
                    </Select>
                    <Input style="width: 200px;" @on-focus="dragOption.disabled = true" @on-blur="dragOption.disabled = false" v-model="item.skip_url" @click.native="tapInput(index,item)" placeholder="请输入商品ID或微页面ID" v-if="item.skip_type != 'group' && item.skip_type != 'h5' && item.skip_type != 'miniprogram'"></Input>
                    <Input style="width: 200px;" @on-focus="dragOption.disabled = true" @on-blur="dragOption.disabled = false" v-model="item.skip_url" placeholder="请输入H5地址" v-if="item.skip_type == 'h5'"></Input>
                    <div class="disFLex vertical"  v-if="item.skip_type == 'miniprogram'">
                      <Input style="width: 200px;margin-right:6px;" @on-focus="dragOption.disabled = true" @on-blur="dragOption.disabled = false" v-model="item.app_id" placeholder="请输入小程序Appid"></Input>
                      <Input style="width: 200px;" @on-focus="dragOption.disabled = true" @on-blur="dragOption.disabled = false" v-model="item.skip_url" placeholder="请输入小程序路径"></Input>
                    </div>       
                  </div>
                  <div v-if="item.skip_type=='h5'" style="margin-top: 10px;">跳转H5需4.18.1030以上版本才支持</div>
                  <div v-else-if="item.skip_type=='miniprogram'" style="margin-top: 10px;">跳转小程序需4.19以上版本才支持</div>
                  <div class="hide">路径：{{getSkipUrl(item.skip_type,item,item.skip_url)}}</div>
                </FormItem>
              </Form>
            </div>
            <div class="icon-wrapper" @click="delBanner(index)">
              <Icon type="ios-trash-outline" />
            </div>
          </div>
        </transition-group>
      </draggable>
    </div>

    <!-- 商品选择器 -->
    <goodsSelect buyMode="-9" @confirm="commitGoodsFn" :selectNum="1" ref="goodsModal" :goodsIdStr="goodsIdStr"></goodsSelect>
    <!-- 微页面选择器 -->
    <micropage-select ref="micropageModal" @confirm="chosePages"></micropage-select>
    <!-- 企业选择器 -->
    <shop-select ref="shopselect" @commitShopFn="commitShopFn"></shop-select>
   
  </div>
</template>
<script>

import { uploadImage } from 'api/uploadImage'

// 商品选择器组件
import goodsSelect from 'base/goods-select/goods-select'
// 微页面选择器组件
import MicropageSelect from 'base/micropage-select/micropage-select'
// 企业选择器
import shopSelect from 'base/shopSelect/shopSelect'

import draggable from 'vuedraggable'

export default {
  name: 'BannerDetail',
  props: {
    /**
     * @description 起始值，即动画开始前显示的数值
     */
    detailData: {
      
    },
  },
  data() {
    return {
      // 编辑索引
      editIndex: 0,
      dragOption: {
          animate: 150,
          disabled: false
      },
	  }
  },
  methods: {
    // 设置path 兼容旧写法
    getSkipUrl:function(_type,_item,_id){
        if(_type == 'good'){
            _item.path = _id ? ('app/mall/item/item?goodsId='+_id) : "";
            return _item.path;
        }else if(_type == 'label'){
            _item.path = _id ? ('app/mall/label/label?labelId='+_id) : "";
            return _item.path;
        }else if(_type == 'group'){
            _item.path = 'app/common/webview/webview?url=headGroup/index.html';
            return  _item.path;
        }else if(_type == 'shop'){
            _item.path = _id ? ('app/shop/index/index?shopId='+_id) : "";
            return _item.path;
        }else if(_type == 'h5'){
             _item.path = _id ? ('app/common/articleWebview/articleWebview?url='+_id) : "";
            return _item.path;
        }else if(_type == 'miniprogram'){
             _item.path=_id;
            return _id;
        }
    },

    // 点击选择
    tapInput(index,item) {
      this.editIndex = index;
      if (item.skip_type == "good") {
        // 打开商品选择器
        this.$refs.goodsModal.show()
      } else if (item.skip_type == "shop") {
        this.$refs.shopselect.openFn(item.skip_url); 
      } else {
        // 打开微页面选择器
        this.$refs.micropageModal.show();
      }
    },

    // 选中商品回调
    commitGoodsFn(_id){
        this.detailData.json[this.editIndex].skip_url = _id;
    },

    // 选中微页面回调
    chosePages(ids) {
        this.detailData.json[this.editIndex].skip_url = ids[0];
    },

     // 企业选中回调
    commitShopFn(shops){
        // var shops = "";
        // for (var i = 0; i < arr.length; i++) {
        //    shops += arr[i].shop_id;
        //    if (i<(arr.length-1)) {
        //      shops += ",";
        //    }
        // }
        this.detailData.json[this.editIndex].skip_url = shops.length>0?shops[0].shop_id:"";
    },


    // 处理图片
    handleFileChange (event) {
      var that = this;
      uploadImage(event.target.files[0]).then(imgUrl => {
          that.detailData.json[event.target.name].image_url = imgUrl;
      }).catch(err => {
          that.$Message.error(err);  
      })  
    },

    // 添加轮播
    addBanner(){
      if(!this.detailData.json){
        this.detailData.json = []
      }
      var _i = this.detailData.json.length;
      var _addBanner={
          image_url:"https://file.open.banchengyun.com/44/2018/01/29/4b86fe25bc2baac4eec154dd90ee8ef1.jpeg",
          skip_type:"",
          skip_url:"",
          sort:_i+'',
          sub_title:"未配置",
          title:"未配置标题"
      }
      if(typeof this.detailData.json != 'object') this.detailData.json=[];
      this.detailData.json.push(_addBanner);
      this.$Message.success("添加成功，请编辑详细内容");
      var that = this;
      setTimeout(function(){
        that.$refs.bannerContentEdit.scrollTop = that.$refs.bannerContentEdit.scrollHeight; 
      },250)
    },

    // 删除轮播
    delBanner(index) {
      this.detailData.json.splice(index,1);
    },

    /*
    * 选择器
    */
    chageSel(_item){
      if(_item.skip_type == 'group'){
          _item.path = 'app/common/webview/webview?url=headGroup.html';
          _item.skip_url='app/common/webview/webview?url=headGroup.html';
      }else{
          _item.skip_url='';
      }
    },
    
  },
  
  computed: {
    goodsIdStr: function () {
        if (this.detailData.json && this.detailData.json.length>0) {
          if (this.editIndex > (this.detailData.json.length-1)) {
            this.editIndex = 0;
          }
          return this.detailData.json[this.editIndex].skip_url;
        } else {
          return "";
        }
        
    }
  },

  components: {
  	draggable,goodsSelect,MicropageSelect,shopSelect
  }
}

</script>

<style scoped>

@import url("../baseModule.less");

/*轮播编辑开始*/
.banner-content-edit {
	flex: 1;
	padding: 16px 16px 16px 24px;
	padding-top: 0;
}
.banner-img-wrapper {
    width: 180px;
    min-width: 180px;
    height: 120px;
    padding: 5px;
    border: 1px solid #f2f2f2;
}
.banner-content-item {
	padding: 16px 0;
  border-top: 1px solid #f2f2f2;
}
.banner-content-item:hover {
  cursor: move;
}
.banner-form-wrapper {
    margin: 0 16px 0 12px;
    flex: 1;
}

/*上传图片控件*/
.input-file-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
}
.input-file-wrapper img {
	width: 100%;
	height: 100%;
}
.input-file-wrapper input {
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 0; top: 0;
	opacity: 0;
}
.icon-wrapper {
	min-width: 50px;
    width: 50px;
    height: 50px;
    background: #f2f2f2;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
	justify-content: center;
}
	
</style>
